<template>
	<view class="all-content">
		<!-- 搜索列表 -->
		<block v-for="(item, index) in dataList" :key="index">
			<view class="cl-box" @click="toDetails(item)">
				<!-- <view > -->
				<image class="cl-img" mode="aspectFit" :src="item.coverImage"></image>
				<view class="cl-title">{{item.title}}</view>
				<view class="cl-author">
					<image class="author-img" :src="item.avatar"></image>
					<view class="author-info" style="width:100%">
						<view class="author-name"><span style="color: #333333;">{{item.authorName}}</span> </view>
					</view>
					<view class="author-info" style="justify-content: flex-end;">
						<view class="author-name" style="margin-right: 10rpx;"><span style="color: #333333;"><text class="tn-icon-eye"></text></span> {{item.viewCount}}</view>
						<view class="author-name"><span style="color: #333333;"><text class="tn-icon-star"></text></span> {{item.collectCount}}</view>
					</view>
				</view>
				<view class="cl-author">
					<view class="author-info">
						<view class="author-name">{{item.department}} {{item.rankName}}</view>
					</view>
				</view>
				<!-- <view class="cl-author">
					<view class="author-info" >
						<view class="author-name" style="margin-right: 10rpx;"><span style="color: #333333;"><text class="tn-icon-eye"></text></span> {{item.viewCount}}</view>
						<view class="author-name"><span style="color: #333333;"><text class="tn-icon-star"></text></span> {{item.collectCount}}</view>
					</view>
				</view> -->
			</view>
		</block>
	</view>

</template>

<script>
	export default {
		name: "list",
		//属性
		props: {
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				maskState: 0,
				content: '',
				focus: false,
			};
		},
		created() {},
		methods: {
			toDetails(v) {
				let url;
				switch (v.contentType) { //0:图文,1视频,2:轮播图
					case '0':
						url = `../../articleVideo/Ti-details/Ti-details?id=${v.id}`
						break;
					case '1':
						url = `../../articleVideo/video-details/video-details?id=${v.id}`
						break;
					default:
						url = `../../articleVideo/swiper-details/swiper-details?id=${v.id}`
						break;
				}
				uni.navigateTo({
					url: url
				})
			},

		}

	}
</script>

<style lang="less">
	.all-content {
		width: 690rpx;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.cl-box {
			width: 336rpx;
			margin-bottom: 20rpx;
			.cl-img {
				width: 336rpx;
				height: 224rpx;
				display: block;
				margin-bottom: 10rpx;
				background-color: #FFFFFF;
				// image {
				// 	width: 100%;
				// 	height: 100%;
				// }
			}

			.cl-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				// text-overflow: ellipsis;
				overflow: hidden;
				// white-space: nowrap;
				width: 100%;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				line-height: 1.5;
				max-height: 2.8em;
				display: -webkit-box;
			}

			.cl-author {
				display: flex;
				align-items: center;
				margin-top: 5rpx;

				.author-img {
					width: 44rpx;
					height: 44rpx;
					flex: 0 0 44rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}

				.author-info {
					width: 283rpx;
					display: flex;
					align-items: center;
					.author-name{
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
			}
		}
	}
</style>
